<script setup>
import { ref,watch } from 'vue';
import NoteTable from '@/components/NoteTable.vue';

// 定义 Tab 状态常量
const TAB_STATUSES = {
  ALL: 'all',
  PENDING: 'pending',
  APPROVED: 'approved',
  REJECTED: 'rejected',
};

// 当前激活的 Tab
const activeTab = ref(TAB_STATUSES.ALL);
const refreshKey = ref(0); // 用于强制刷新的key

// 切换标签时刷新当前表格
watch(activeTab, () => {
    refreshKey.value++
});

</script>
<template>
  <el-card class="note-management">
    <!-- 头部标题 -->
    <template #header>
      <div class="header-container">
        <span class="header-title">笔记管理</span>
      </div>
    </template>

    <!-- 标签页导航 -->
    <el-tabs v-model="activeTab" class="note-tabs">
      <el-tab-pane 
        v-for="tab in [
          { label: '全部笔记', name: TAB_STATUSES.ALL },
          { label: '待审核', name: TAB_STATUSES.PENDING },
          { label: '已通过', name: TAB_STATUSES.APPROVED },
          { label: '已拒绝', name: TAB_STATUSES.REJECTED }
        ]" 
        :key="tab.name"
        :label="tab.label" 
        :name="tab.name"
      >
        <NoteTable 
          :key="`${tab.name}-${refreshKey}`" 
          :status="tab.name" 
        />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<style scoped lang="scss">
.note-management {
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-title {
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>